<template>
    <div>

        <!--  redbous -->
        <div class="fang" step1>
            <div class="fangin" step2>
                <div class="mainredbous bous1 hidden">
                    <div class="redboustop"></div>
                    <div class="redbousicon"><img src="../assets/fu.png" alt=""></div>
                </div>
                <div class="mainredbous bous2 hidden">
                    <div class="redboustop"></div>
                    <div class="redbousicon"><img src="../assets/fu.png" alt=""></div>
                </div>
                <div class="mainredbous bous3 hidden">
                    <div class="redboustop"></div>
                    <div class="redbousicon"><img src="../assets/fu.png" alt=""></div>
                </div>
            </div>
        </div>
        <!-- btn -->
        <div class="btn">
            立即参与
        </div>

    </div>
</template>

<style scoped>
.fang {
    margin: 30px auto 0;
    max-width: 520px;
}

.fangin {
    position: relative;
    padding-bottom: 100%;
}

.mainredbous {
    position: absolute;
    top: 10%;
    left: 30%;
    right: 30%;
    height: 65%;
    background-color: red;
    border-radius: 10px;
    box-shadow: 0 5px 10px 0 #333;
    z-index: 2;
}

.hidden {
    overflow: hidden;
}

.redboustop {
    margin-top: -50%;
    width: 100%;
    height: 60%;
    box-shadow: 0 0 10px 0 #333;
    border-radius: 50%;
}

.redbousicon {
    position: absolute;
    top: 15%;
    left: 20%;
    right: 20%;
    height: 35%;
    background-color: #ffe800;
    border-radius: 50%;
}

.redbousicon img {
    width: 100%;
    height: 100%;
    transform: scale(.5);
}

.bous1 {
    animation: anims 1700ms infinite;
}

.bous2 {
    top: 25%;
    left: 15%;
    right: 55%;
    height: 45%;
    z-index: 1;
    transform: rotateZ(-30deg);
    animation: anims2 2000ms infinite;
}

.bous3 {
    top: 20%;
    left: 55%;
    right: 15%;
    height: 50%;
    z-index: 1;
    transform: rotateZ(30deg);
    animation: anims3 1500ms infinite;
}

.btn {
    position: relative;
    margin: -35% 20% 0;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: #ffe800;
    box-shadow: 0 5px 10px 0 #b4b4b4;
    border-radius: 40px;
    z-index: 3;
    font-size: 30px;
    color: #ff7979;
}

@media (max-width:420px) {
    .btn {
        font-size: 25px;
        height: 60px;
        line-height: 60px;
    }
}

@media (max-width:320px) {
    .btn {
        font-size: 20px;
        height: 50px;
        line-height: 50px;
    }
}

@media (max-width:270px) {
    .btn {
        font-size: 15px;
        height: 40px;
        line-height: 40px;
    }
}

@keyframes anims {
    0% {
        top: 10%;
        transform: scale(1);
    }

    50% {
        top: 7%;
        transform: scale(1, 1.1);
    }

    100% {
        top: 10%;
        transform: scale(1);
    }
}

@keyframes anims2 {
    0% {
        transform: scale(1) rotateZ(-30deg);
    }

    50% {
        transform: scale(1.1) rotateZ(-30deg);
    }

    100% {
        transform: scale(1) rotateZ(-30deg);
    }
}

@keyframes anims3 {
    0% {
        transform: scale(1) rotateZ(30deg);
    }

    50% {
        transform: scale(1.1) rotateZ(30deg);
    }

    100% {
        transform: scale(1) rotateZ(30deg);
    }
}
</style>